<template>
    <div class="DetailBetting">
        <header class="mui-bar mui-bar-nav mint-header">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">投注详情</h1>
        </header>
        <div class="bJ"></div>
        <div class="title">
            <div class="title1">重庆竞猜</div>
            <div class="title2">2018030454561期</div>
            <div class="title3">待开奖</div>
            <ul class="title4">
                <li class="list one">
                    <span class="oneone font kj">开奖号码:</span>
                    <span class="font1">
                        <span>?</span>
                        <span>?</span>
                        <span>?</span>
                        <span>?</span>
                        <span>?</span>
                        <span>?</span>
                    </span>
                </li>
                <li class="list">
                    <div>投注金额
                        <span class="oneone">7500,500,300</span>
                    </div>
                    <div>投注赔率
                        <span>--</span>
                    </div>
                    <div>我的盈亏
                        <span>--</span>
                    </div>
                </li>
                <li class="list one">

                </li>

            </ul>
        </div>
        <div class="titleone">
            <div class="sum">
                <div class="one">玩家名称：阿斯顿发个</div>
                <div class="tow">投注号码：5，0，3，6，4，5，2，4</div>
                <div class="there">投注时间：2018-03-23</div>
                <div class="font">订单编号：000201803235659</div>
            </div>
            <div class="redbtn">
                <mt-button type="danger" size="large">再来一发</mt-button>
            </div>
        </div>
    </div>
</template>
<script>
</script>
<style lang="scss" scoped>
.DetailBetting {
    padding-bottom: 1.2rem;
    .mui-bar {
        background-color: rgba(0, 0, 0, 0);
        background: #d51313;
        box-shadow: none;
    }
    .bJ {
        background: url("../img/Game/组7.png") no-repeat;
        background-size: 7.5rem 3.5rem;
        height: 3.5rem;
        width: 100%;
    }
    .titleone {
        background: #fff;
        height: 4.7rem;
        width: 100%;
        border-top: 1px solid #e0e0ee;
        .sum {
            padding-top: 0.58rem;
            height: 3.82rem;
            padding-left: 0.74rem;
            div {
                padding-bottom: 0.24rem;
            }
        }
    }
    .title {
        margin-top: -1px;
        background: #fff;
        height: 4.7rem;
        width: 100%;
        padding-bottom: 5rem;
        div {
            text-align: center;
        }
        .title1 {
            font-size: 0.3rem;
            margin-bottom: 0.18rem;
        }
        .title2 {
            font-size: 0.3rem;
            margin-bottom: 0.4rem;
        }
        .title3 {
            font-size: 0.48rem;
            color: red;
        }
        .title4 {
            padding: 0;
            width: 80%;
            margin: 0 auto;
            margin-top: 0.8rem;
            .list {
                text-align: left;
                div {
                    text-align: left;
                    span{
                        text-align: left;
                        margin-left:0.24rem;
                    }
                }
                span {
                    display: inline-block;
                    font-size: 0.3rem;
                    width: 30%;
                    margin-bottom: 0.1rem;
                    text-align: center;
                    font-weight: 800;
                }
            }
            .one {
                font-size: 0.28rem;
                display: flex;
                justify-content: flex-end;
                span {
                    text-align: left;
                    font-weight: 400;
                }
                .oneone {
                    width: 25%;
                }
                .font {
                    font-size: 0.3rem;
                    font-weight: 800;
                    .kj {
                        width: 23%；;
                    }
                }
                .font1 {
                    width: 75%;
                    display: flex;
                    justify-content: space-around;
                    position: relative;
                        line-height: 0.7rem;

                    span {
                        border-radius: 50%;
                        border: 1px solid red;
                        font-size: 0.28rem;
                        width: 0.5rem;
                        height: 0.5rem;
                        line-height: 0.5rem;
                        text-align: center;
                        background: red;
                        color: #fff;
                    }
                }
            }
        }
    }
}
</style>    
